<template>
  <div class="warning-settings">
    <a-form layout="vertical">
      <a-form-item label="高危预警阈值">
        <a-input-number v-model:value="settings.highThreshold" :min="1" :max="10" />
        <span class="threshold-desc">剩余寿命少于此年数时触发高危预警</span>
      </a-form-item>

      <a-form-item label="中度预警阈值">
        <a-input-number v-model:value="settings.mediumThreshold" :min="5" :max="20" />
        <span class="threshold-desc">剩余寿命少于此年数时触发中度预警</span>
      </a-form-item>

      <a-form-item>
        <a-button type="primary" @click="saveSettings"> 保存设置 </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'

const emit = defineEmits(['update'])

const settings = ref({
  highThreshold: 5,
  mediumThreshold: 15
})

const saveSettings = () => {
  emit('update', settings.value)
  message.success('预警设置已保存')
}
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.warning-settings {
  padding: 16px;
  color: $text-primary;

  .setting-section {
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid $border-color;
    border-radius: 8px;

    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: $text-primary;
      margin-bottom: 16px;
    }

    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .setting-label {
        color: $text-secondary;
      }

      .setting-value {
        color: $text-primary;
      }
    }
  }

  .threshold-desc {
    margin-left: 8px;
    color: #666;
    font-size: 12px;
  }
}
</style>
